'use client'
import Emberbox from '@/utils/mapbox/engine'
import React, { useEffect } from 'react'
import { useEmberboxStore } from '../../hooks/store'
import useServeData from '../../hooks/serveData/useServeData'
import { gcj02towgs84 } from '@/utils/CoordinateConvert/gcj02towgs84'


const index = () => {
    const store: any = useEmberboxStore()
    useEffect(() => {
        const emberbox = new Emberbox('map',
            'pk.eyJ1IjoiZW1iZXJlZWVlIiwiYSI6ImNsbG9tZnhhdTBjOW0zZW9hNndjMDBheWQifQ.2tdcbznsaY7x4V0snpV9ZA',
            {
                center: gcj02towgs84([108.93882167039392, 34.21948638739096]),
                zoom: 16
            }

        )


        store.setEmberbox(emberbox)
        setTimeout(() => {
            console.log(store);

            useServeData(emberbox, store)
            emberbox.on("onGeoJsonMouseon", (data: any) => {
                console.log("mouse in", data);
            })
        }, 1000)
        // setTimeout(() => {
        //     emberbox.reset({
        //         center: [117.16324112036693,
        //             39.12504588225827]
        //     })
        // }, 1000)
        return (() => {
            store.setEmberbox(null)
        })
    }, [])



    return (
        <>
            <div id='map' className='mapbox_container'></div>
        </>

    )
}

export default index